import React, {PureComponent, createRef} from 'react';
import Title from 'react-document-title'
import {withRouter} from 'react-router-dom';

import {store} from '@store';
import {getPurchaseOrderList} from '@api/order';

import {Tabs, Badge} from 'antd-mobile';
import {OrderStyle} from './style'
import BetterScroll from 'components/betterScroll';
import {EmptyData} from '@common'

import OrderItem from './components';

import {LoadingMore} from 'components/loading'


const tabs = [
  {title: <Badge text={''}>全部订单</Badge>},
  {title: <Badge text={''}>待分享</Badge>},
  {title: <Badge text={''}>拼货中</Badge>},
  {title: <Badge>拼车中</Badge>},
  {title: <Badge>拼车成功</Badge>},
  {title: <Badge>已取消</Badge>},
]


class PurchaseOrder extends PureComponent {

  state = {
    purchaseOrder: [],
    isPo: true,
    activeTabIndex: 0,
    mapConfig: [
      {status: '999', key: 'qazw'},
      {status: '1', key: 'qwax'},
      {status: '2', key: 'qwaz'},
      {status: '3', key: 'qzaw'},
      {status: '5', key: 'qszw'},
      {status: '11', key: 'qkzw'}
    ]
  }

  uniacid = store.getState().appConfig.uniacid

  config = {
    uniacid: this.uniacid,
    page: -1,
    page_num: 10,
  };


  componentDidMount() {
    this.PO_Scroll = createRef();
    this.getOrderListData(999)
  }

  render() {
    const {purchaseOrder, activeTabIndex, isPo, mapConfig} = this.state

    return (
      <>
        <OrderStyle>
          <Title title= '采购需求' />
          <Tabs tabs={tabs}
                tabBarInactiveTextColor="#474747"
                swipeable={false}
                initialPage={0}
                onChange={(tab, index) => {
                  this.handelChange(index)
                }}
          >

            {
              mapConfig.map((itex, kex) => {
                return (
                  kex === activeTabIndex && <BetterScroll
                    key={kex + kex.key}
                    isLoadMore={isPo}
                    loadMore={e => {
                      this.switchLoadingMore(itex.status)
                    }}
                    style={{height: " calc( 100vh - 3rem - env(safe-area-inset-bottom) )", marginTop: '.32rem'}}
                    ref={this.PO_Scroll}

                  >
                    <div style={{height: '100%', backgroundColor: '#F5F5F5'}}>
                      {
                        purchaseOrder.length > 0 &&
                        purchaseOrder.map((item, key) => {
                          return (
                            <OrderItem key={key + item.deposit_orderno} deleteOrder={e => {
                              this.deleteOrder(key)
                            }} item={item}/>
                          )
                        })
                      }
                      {
                        purchaseOrder.length > 3 &&
                        <LoadingMore isLoading={isPo}>

                        </LoadingMore>
                      }
                      {
                        purchaseOrder.length === 0 && <EmptyData/>
                      }
                    </div>
                  </BetterScroll>
                )
              })
            }

          </Tabs>
        </OrderStyle>
      </>
    );
  }

  switchLoadingMore(status) {
    this.getOrderListData(status)
  }

  deleteOrder(key) {
    let temp = [...this.state.purchaseOrder]
    temp.splice(key, 1)
    this.setState({
        purchaseOrder: temp
      },
      () => {
        try {
          this.PO_Scroll.current.BScroll.refresh();
        } catch (error) {
          console.log(error)
        }
      }
    )

  }

  getOrderListData(status) {

    this.config.status = status;
    this.config.page += 1;
    getPurchaseOrderList(this.config).then(res => {
      if (res.status === 200) {

        console.log('下一页长度', typeof res.data, res.data.length)

        if (res.data.length !== 0) {

          if (res.data.length < 10 && this.config.page === 0) {

            console.log('小于等于5 的走这里')

            this.setState({
              purchaseOrder: res.data
            }, () => {
              try {
                this.PO_Scroll.current.BScroll.refresh();
                this.PO_Scroll.current.BScroll.finishPullUp();
              } catch (error) {
                console.log(error)
              }
            })
          } else {

            console.log('大于于等于5 的走这里')

            this.setState({
              purchaseOrder: [...this.state.purchaseOrder, ...res.data]
            }, () => {
              try {
                this.PO_Scroll.current.BScroll.refresh();
                this.PO_Scroll.current.BScroll.finishPullUp();
              } catch (error) {
                console.log(error)
              }
            })
          }

        } else {
          //  如果下一页放回的数据为空
          console.log('如果下一页放回的数据为空')
          this.setState({
              isPo: false
            }, () => {
              try {
                this.PO_Scroll.current.BScroll.finishPullUp();
              } catch (error) {

              }
            }
          )
        }

      } else {
        console.log(res.msg)
      }
    })
  }

  handelChange(index) {
    console.log(index, 'handel')
    switch (index) {
      case 0:
        this.config.page = -1;
        this.setState({
          activeTabIndex: 0,
          purchaseOrder: []
        }, () => {
          this.getOrderListData(999)
        })
        break;
      case 1:
        this.config.page = -1;
        this.setState({
          activeTabIndex: 1,
          purchaseOrder: []
        }, () => {
          this.getOrderListData(1)
        })
        break;
      case 2:
        this.config.page = -1;
        this.setState({
          activeTabIndex: 2,
          purchaseOrder: []
        }, () => {
          this.getOrderListData(2);
        })
        break;
      case 3:
        this.config.page = -1;
        this.setState({
          activeTabIndex: 3,
          purchaseOrder: []

        }, () => {
          this.getOrderListData(3);
        })
        break;
      case 4:
        this.config.page = -1;
        this.setState({
          activeTabIndex: 4,
          purchaseOrder: []
        }, () => {
          this.getOrderListData(4);
        })
        break;
      case 5:
        this.config.page = -1;
        this.setState({
          activeTabIndex: 5,
          purchaseOrder: []
        }, () => {
          this.getOrderListData(11);
        })
        break;
      default:
        break;
    }

  }

}


export default withRouter(PurchaseOrder);